<!--
* @author wn
* @date 2023/08/01 16:03:51
* @description:首页分类
!-->
<template>
	<view class="category">
		<navigator
			class="category-item"
			hover-class="none"
			url="/pages/index/index"
			v-for="item in list"
			:key="item.id"
		>
			<image class="icon" :src="item.icon" mode="'scaleToFit'"></image>
			<text class="text">{{ item.name }}</text>
		</navigator>
	</view>
</template>
<script setup lang="ts">
defineProps<{
	list: CategoryItem[]
}>()
</script>
<style lang="scss">
/* 前台类目 */
.category {
	display: flex;
	flex-wrap: wrap;
	margin: 20rpx 0 0;
	padding: 10rpx 0;
	min-height: 328rpx;
	background-color: #fff;

	.category-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 20%;
		.icon {
			width: 100rpx;
			height: 100rpx;
		}
		.text {
			font-size: 26rpx;
			color: #666;
		}
	}
}
</style>
